<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{message}}</h3>
			<!-- <h3>方法:{{reversedMessage()}}</h3>
			<h3>方法:{{reversedMessage()}}</h3> -->
			<h3>计算属性:{{reversedMessage}}</h3>
			<h3>计算属性:{{reversedMessage}}</h3>
			<h3>{{fullName}}</h3>
			<h3>{{fullName}}</h3>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					message: 'Hello',
					firstName: 'Foo',
					lastName: 'Bar'
				},
				methods: {
					// reversedMessage() {
					// 	console.log("-----");
					// 	return this.message.split('').reverse().join('')
					// }
				},
				computed: {
					//简写
					reversedMessage() {
						console.log("-----");
						return this.message.split('').reverse().join('')
					},
					//对象
					fullName: {
						get: function() {
							console.log("get方法被调用了")
							return this.firstName + ' ' + this.lastName
						},
						set: function(newValue) {
							console.log("set方法被调用了")
							console.log(newValue)
						}
					}
				}
			})
		</script>
	</body>
</html>
